import { MoneyConfig, MoneyConfigProps, MoneyConvertPoints } from '@/api';
import { GetUserInfo } from '@/api/user';
import { Button, Icon, Popup } from '@antmjs/vantui';
import { Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import classNames from 'classnames';
import { useState } from 'react';
import { useRequest } from 'taro-hooks';

export default function useExchangeBeans(props: { onSuccess: Function }) {
  const { data: user } = useRequest(GetUserInfo, {
    cacheKey: 'get:user:info',
  });

  const [show, setShow] = useState<boolean>(false);
  const [cur, setCur] = useState<MoneyConfigProps>();

  const { data: configs } = useRequest(() => MoneyConfig({ type: 2 }));
  const { runAsync } = useRequest(MoneyConvertPoints, { manual: true });

  function handleClose() {
    setCur(undefined);
    setShow(false);
  }
  function renderNode() {
    return (
      <Popup
        show={show}
        round
        position='bottom'
        className='p-4'
        style={{
          overflow: 'initial',
        }}
        onClose={() => handleClose()}
      >
        <Icon
          name='close'
          onClick={() => handleClose()}
          className=' absolute right-2 -top-[90px] text-3xl text-white'
        />
        <Text className=' text-lg font-bold text-black block mb-2'>
          积分兑换申请
        </Text>

        <View
          className='px-4 py-8 pb-4 border-[2px] border-solid border-[rgba(70,109,180,0.2)] rounded-lg mb-4 mt-8 relative'
          style={{
            background:
              'linear-gradient(180deg, rgba(179,199,248,0.42) 0%, rgba(196,213,253,0.48) 44%, rgba(213,223,249,0.17) 100%)',
          }}
        >
          <View
            className='w-[268px] h-[58px] leading-[52px] bg-cover absolute -top-[20px] left-1/2 -translate-x-1/2  text-black font-bold text-center text-lg'
            style={{
              backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/title-bg-1.png)`,
            }}
          >
            选择兑换数量
          </View>

          <View className=' grid grid-cols-3 gap-3'>
            {configs?.map((item) => (
              <View
                style={{
                  background: ` linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%)`,
                }}
                className={classNames(
                  ' border-solid border-[4px] rounded-lg text-center py-4 relative',
                  {
                    'opacity-60': (user?.points || 0) < item.price,
                    'border-primary': cur?.id === item.id,
                    'border-white': cur?.id !== item.id,
                  }
                )}
                key={item.id}
                onClick={() => {
                  if ((user?.points || 0) < item.price) return;
                  setCur(item);
                }}
              >
                {/* 积分不足icon */}
                {(user?.points || 0) < item.price && (
                  <View
                    className='w-[124px] h-[100px] bg-cover absolute -right-[24px] -top-[24px]'
                    style={{
                      backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/Iinsufficient-points.png)`,
                    }}
                  />
                )}

                <View className=' flex leading-none items-center justify-center'>
                  <Text className=' text-lg font-bold '>{item.money}</Text>
                  <Text className=' text-xs text-gary4 ml-1'>帮豆</Text>
                </View>

                <View className=' text-xs  text-gary1 mt-1'>
                  {item.price}积分
                </View>
              </View>
            ))}
          </View>
        </View>

        <Button
          disabled={Boolean(!cur?.id)}
          onClick={async () => {
            if (!cur?.id) return;
            await runAsync({ config: cur?.id });
            handleClose();
            props.onSuccess();
            Taro.showToast({ title: '兑换成功' });
          }}
          type='primary'
          size='large'
          className='mt-2'
        >
          兑换
        </Button>
      </Popup>
    );
  }

  return {
    renderNode,
    open: () => setShow(true),
  };
}
